<template>
  <div>
    <div id="app" class="pure-g">
      <div class="pure-u-1-2">
        <ul class="knowledgeStyle" style="margin-top: 30px;">
          <li>
            <b>一级知识点 :</b>
          </li>
          <li v-for="(item, index) in levelOneData" :key="index" :class="{knowledgeActive: item.selected}"
          @click="($event) => { addFirstKnowledge($event, item, index)}">{{item.title}}</li>
        </ul>
        <ul class="knowledgeStyle" style="margin-top: 30px;">
          <li>
            <b>二级知识点 :</b>
          </li>
          <li v-for="(item, index) in levelTwoData" :key="index" :class="{knowledgeActive: item.selected}"
          @click="($event) => { addsecondKnowledge($event, item, index)}">{{item.title}}</li>
        </ul>
      </div>

      <div class="pure-u-1-2">
        <Tree :data="treeData" multiple @on-select-change="treeChange" style="margin-top: 30px;"></Tree>
      </div>
    </div>
    <div>
      <div v-for="(item, index) in treeSelected" :key="index" class="nav-area">
        <span style="margin-right: 10px;" @click="() => onDeleteSelected(item)">{{item.title}}</span>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import HelloWorld from "./components/HelloWorld.vue"
import axios from "axios"
const uuidv4 = require('uuid/v4')
const axiosInstant = axios.create({
  withCredentials: true,
  baseURL: "http://localhost:3002/"
})

function appendSelectedProps(data) {
  data.forEach(element => {
    element.selected = false
    element._uuid = uuidv4()
    if (element.children) {
      appendSelectedProps(element.children)
    }
  })
}

class TreeQuery {
  selected = []
  findTreeSelected = (data) => {
    data.forEach(element => {
      if (element.selected) {
        this.selected.push(element)
      }
      if (element.children) {
        this.findTreeSelected(element.children)
      }
    })
  }
  querySelected = (data) => {
    this.selected.length = 0
    this.findTreeSelected(data)
    return this.selected
  }
}
const treeQuery = new TreeQuery()

export default {
  name: "app",
  data() {
    return {
      rawKnowledge: null,
      allSelected: []
    }
  },
  components: {
    HelloWorld
  },
  methods: {
    addFirstKnowledge($event, item, index) {
      this.levelOneData.forEach(one => {
        one.selected = false
      })
      item.selected = true
      if (this.levelTwoData.length > 0) {
        this.levelTwoData[0].selected = true
      }
      this.allSelected = treeQuery.querySelected(this.levelOneData)
    },
    addsecondKnowledge($event, item, index) {
      this.levelTwoData.forEach(two => {
        two.selected = false
      })
      item.selected = true
      this.allSelected = treeQuery.querySelected(this.levelOneData)      
    },
    treeChange(selected, current) {
      this.allSelected = treeQuery.querySelected(this.levelOneData)  
    },
    onDeleteSelected(item) {
      item.selected = !item.selected
      this.allSelected = treeQuery.querySelected(this.levelOneData)  
    }
  },
  mounted() {
    axiosInstant.get("/knowledge").then(res => {
      appendSelectedProps(res.data.datas.knowledgePoints)
      this.rawKnowledge = res.data.datas
      this.levelOneData[0].selected = true
      this.levelTwoData[0].selected = true
    });
  },
  computed: {
    levelOneData() {
      return this.rawKnowledge ? this.rawKnowledge.knowledgePoints : []
    },
    levelTwoData() {
      const oneSelected = this.levelOneData.find(one => one.selected)
      const two = oneSelected ? oneSelected.children : []
      return two
    },
    treeData() {
      const twoSelected = this.levelTwoData.find(two => two.selected)
      return twoSelected ? twoSelected.children : []
    },
    treeSelected() {
      return this.allSelected.filter(item => {
        const inOneOrTwo = this.levelOneData.some(one => {
          return one._uuid === item._uuid || one.children.some(two => two._uuid === item._uuid)
        })
        return !inOneOrTwo
      })
    }
  }
};
/* eslint-enable */
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.knowledgeActive {
  color: red;
}
.nav-area{ 
  text-align: center;
  font-size: 20px;
  margin-top: 5px;
  color: cadetblue;
}
</style>
